Adwaita: GtkScale
authorLapo Calamandrei <calamandrei@gmail.com>
Sat, 14 Jun 2014 08:19:15 +0000 (10:19 +0200)
committerLapo Calamandrei <calamandrei@gmail.com>
Sat, 14 Jun 2014 08:19:15 +0000 (10:19 +0200)
slider :hover state added

gtk/resources/theme/Adwaita/_common.scss
gtk/resources/theme/Adwaita/gtk-contained-dark.css
gtk/resources/theme/Adwaita/gtk-contained.css

index 601cf8060dfa4e220178958c79388bbdc72ef1c9..e6767503560241c61b035b2a44efe9cabef4e317 100644 (file)
@@ -1214,13 +1214,22 @@ GtkCheckButton.text-button:selected { background-color: transparent; }
   margin: 10px;
   &.slider {
     //FIXME: better gradient on the slider and hover state
-    @include button(normal);
+    @include button(normal, $noedge: true);
     border-radius: 50%;
     border-color: darken($borders_color,3%);
     box-shadow: inset 0 1px if($variant=='light', white,
                                transparentize(white,0.85)),
                 inset 0 #{-2px} $bg_color,
                 inset 0 #{-1px} mix($bg_color,$borders_color,50%);
+    &:hover {
+      @include button(hover, $noedge: true);
+      border-color: darken($borders_color,3%);
+      box-shadow: inset 0 1px if($variant=='light', white,
+                                 transparentize(white,0.85)),
+                  inset 0 #{-2px} if($variant=='light', white,
+                                     transparentize(white,0.86)),
+                  inset 0 #{-1px} mix($bg_color,$borders_color,70%);
+    }
     &:insensitive {
       background-image: linear-gradient(to bottom, $insensitive_bg_color);
       box-shadow: none;
@@ -1235,6 +1244,7 @@ GtkCheckButton.text-button:selected { background-color: transparent; }
     &:active { border: 1px solid darken($selected_borders_color, 3%); }
     &.fine-tune:active { //FIXME: Lapo doesn't like the shrinkage. Bad for touch
       border: 4px solid transparent; //margin
+      //FIXME: there's a square background under the slider
       box-shadow: inset 0 2px $borders_edge,
                   inset 0 0 0 1px darken($selected_borders_color,3%); //border
     }
index db23d2766071149e6f50cb41c9c31fd9415034a3..f2a43ff6fc0a96cc29e04917662f3e089d76da91 100644 (file)
@@ -1552,10 +1552,21 @@ GtkCheckButton.text-button:selected {
     border-color: #1c1f1f;
     text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
     icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     border-color: #151717;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px #393f3f, inset 0 -1px #2a2f2f; }
+    .scale.slider:hover {
+      border-width: 1px;
+      border-style: solid;
+      color: #eeeeec;
+      border-color: #1c1f1f;
+      background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f);
+      text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+      icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+      border-color: #151717;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), inset 0 -2px rgba(255, 255, 255, 0.14), inset 0 -1px #303535; }
     .scale.slider:insensitive {
       background-image: linear-gradient(to bottom, #363a3a);
       box-shadow: none; }
index 6cff3cd914394646282ef41de296b0942d6512ca..95cf7dbc891d8985665142a7e02395316c579244 100644 (file)
@@ -1552,10 +1552,21 @@ GtkCheckButton.text-button:selected {
     border-color: #a1a1a1;
     text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
     icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
-    box-shadow: inset 0 1px white, 0 1px white;
+    box-shadow: inset 0 1px white;
     border-radius: 50%;
     border-color: #999999;
     box-shadow: inset 0 1px white, inset 0 -2px #ededed, inset 0 -1px #c7c7c7; }
+    .scale.slider:hover {
+      border-width: 1px;
+      border-style: solid;
+      color: #2e3436;
+      border-color: #a1a1a1;
+      background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed);
+      text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+      icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
+      box-shadow: inset 0 1px white;
+      border-color: #999999;
+      box-shadow: inset 0 1px white, inset 0 -2px white, inset 0 -1px #d6d6d6; }
     .scale.slider:insensitive {
       background-image: linear-gradient(to bottom, #f4f4f4);
       box-shadow: none; }